<template>
  <div class="index" v-load="isloading">

    <div class="logo">

    </div>
    <div class="login" >

      <div class="rightform" >
        <h3>Home</h3>
        <!-- 登录 -->
        <el-form ref="loginRef" class="lo" :rules="check" :model="LoginForm" key="login" v-if=!or>

          <el-form-item prop="userName" class="z">
            <el-input v-model="LoginForm.userName" placeholder="请输入账号" :prefix-icon="User"></el-input>
          </el-form-item>

          <el-form-item prop="password" class="z">
            <el-input v-model="LoginForm.password" placeholder="请输入密码" :prefix-icon="Lock" type="password" @keyup.enter="login()" ></el-input>
          </el-form-item>
          <el-button class="b btn" @click="login">登录</el-button>

        </el-form>
        <!-- 注册 -->
        <el-form ref="regRef" class="lo" :rules="check" :model="regForm" key="login" v-if=or>

          <el-form-item prop="email" class="z">
            <el-input v-model="regForm.email" placeholder="email" :prefix-icon="User"></el-input>
          </el-form-item>

          <el-form-item prop="password" class="z">
            <el-input v-model="regForm.password" placeholder="请输入密码" :prefix-icon="Lock" type="password"></el-input>
          </el-form-item>

          <el-form-item prop="rePassword" class="z">
            <el-input v-model="regForm.rePassword" placeholder="请再次输入密码" :prefix-icon="Lock" type="password"></el-input>
          </el-form-item>

          <el-button class="btn" @click="reg">注册</el-button>

        </el-form>



        <div class="footer">
          <ul>
            <li style="font-size: 15px;"> <a href="#" @click="or = !or"> 注册 -></a></li>
            <li style="font-size: 15px;"> <a href="#"> 忘记密码？</a></li>
          </ul>
        </div>
      </div>



    </div>
  </div>
</template>

<script setup>
import { defineOptions, reactive, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { regService, loginService } from '@/api/user.js'
import { ElMessage } from 'element-plus';
import { User,Lock } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores';
defineOptions({
  name: 'Login'
})
const isloading = ref(false);
const userStore = useUserStore();
const LoginForm = reactive({
  userName: '',
  password: '',
})
const regForm = reactive({
  email: '',
  password: '',
  rePassword: ''
})

const clear = () => {
  LoginForm.userName = '';
  LoginForm.password = '';
  regForm.email = '';
  regForm.password = '';
  regForm.rePassword = '';
}
const or = ref(false);
const router = useRouter();
const loginRef = ref('loginRef')

const login = async () => {
  await loginRef.value.validate();
  isloading.value = true;
   const {data:res} = await loginService(LoginForm);
   isloading.value = false;
  console.log(res)
  if (res.code === 200) {
    ElMessage.success(res.msg);
    userStore.setUser(res.data);
    console.log(userStore.user)
    router.push('/chat');
  }else{
    ElMessage.error(res.msg);
    clear();
  }
  
}

watch(or, (newValue, oldValue) => {
  clear();
})

const regRef = ref('regRef')
// 注册按钮
const reg = async () => {
  await regRef.value.validate();
  const { data: res } = await regService(regForm);

  console.log(res)
  if (res.code !== 200) {
    ElMessage.error(res.msg)
  }
  ElMessage.success(res.msg)
  clear();
  or.value = false;
}


const check = {
  userName: [
    { required: true, message: '邮箱不能为空', trigger: 'blur' },
    { min: 6, max: 15, message: '格式错误', trigger: 'blur' },
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    },
  ],
  email: [
    { required: true, message: '邮箱不能为空', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的邮箱', trigger: 'blur' }
  ],

  passWord: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    }],

  rePassWord: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    },
    {
      validator: (rlue, value, callback) => {
        if (regForm.passWord !== value) {
          callback(new Error('两次密码不一致'));
        } else {
          callback();
        }
      }
    }
  ]
}



</script>

<style lang="less" scoped>
.index {
  display: flex;

  margin: auto auto;
  width: 90%;
  height: 90%;
  background-color: #eee;
  opacity: 0.8;
  border-radius: 2%;
  // border-radius: 20%;
  // border: 1px solid #eee;
  box-shadow: 0px ,1px ,2px,0px,rgba(231, 227, 227, 0.5);
  overflow: hidden;
  position: relative;

  .login {
    background-color: #eee;
    margin: 0 auto;
  }

  .logo {
    width: 40%;
    background: url('@/assets/bg-img/logo.jpg') center center no-repeat;
    background-size: cover;

  }

  .rightform {
    padding-top: 2vh;
    text-align: center;
    position: relative;
    width: 17vw;
    height: 100%;

    h3 {
      margin-top: 18vh;
      font-size: 40px;
      margin-bottom: 3vh;
      // position: absolute;
      // z-index: 998;

    }

    .z {
      margin-top: 1vh;
    }

    .btn {
      // margin-top: 2vh;
      border:none;
    }
    .b::before{
      background-color: #f0e7ec;
    }
    .lo {
      text-align: center;
      vertical-align: middle;
    }

    .footer ul {
      display: flex;
      justify-content: space-between;

      a {
        text-decoration: none;
        color: #504a4a;
        ;
      }
    }
  }
}
</style>